<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>clock</title>
    <style>
        body {
            padding: 0;
            margin: 0;
        }

        canvas {
            display: block;
            margin: 200px auto;
            border: 1px solid #eee;
        }
    </style>
</head>

<!-- 
 存在的问题： 
 1.秒针转完一圈，分钟的转动是一次性的，没有过渡效果
 2.指针没有圆角效果 （closePath应该在stroke之后）
-->

<body>
    <canvas id="clock" width="300" height="300"></canvas>
    <script>
        init();

        function init() {
            let canvas = document.querySelector("#clock");
            let ctx = canvas.getContext("2d");
            requestAnimationFrame(draw.bind(this, ctx));
        }
        function draw(ctx) {
            ctx.lineCap = 'round'
            ctx.save();
            ctx.translate(150, 150);

            ctx.beginPath();
            let outR = 100
            ctx.fillStyle = '#325fa2';
            ctx.arc(0, 0, outR, 0, Math.PI * 2);
            ctx.fill()
            ctx.closePath();

            ctx.beginPath();
            let innerR = 90
            ctx.fillStyle = '#fff';
            ctx.arc(0, 0, innerR, 0, Math.PI * 2);
            ctx.fill()
            ctx.closePath();


            // 绘制小时刻度
            for (let j = 0; j < 12; j++) {
                ctx.save();
                ctx.beginPath();
                ctx.fillStyle = "#000";
                ctx.strokeStyle = "#000";
                ctx.lineWidth = 4
                ctx.rotate((Math.PI / 6) * j)
                ctx.moveTo(innerR, 0)
                ctx.lineTo(innerR - 10, 0)
                ctx.stroke();
                ctx.closePath();
                ctx.restore();
            }

            // 绘制分钟刻度
            for (let j = 0; j < 60; j++) {
                ctx.save();
                ctx.beginPath();
                ctx.fillStyle = "#000";
                ctx.strokeStyle = "#000";
                ctx.lineWidth = 2
                ctx.rotate((Math.PI / 30) * j)
                ctx.moveTo(innerR, 0)
                ctx.lineTo(innerR - 4, 0)
                ctx.stroke();
                ctx.closePath();
                ctx.restore();
            }

            // 获取当前时间
            let date = new Date();
            let hour = date.getHours()
            if(hour > 12) hour = hour -12
            let minute = date.getMinutes()
            let seconds = date.getSeconds()
            console.log(hour, minute, seconds)

        
            // 时针每小时走的刻度  （Math.PI / 3600）
            // 分钟每分钟走的刻度  （Math.PI / 60）
            // 秒针每秒走的刻度    （Math.PI / 30）
            ctx.save();
            // 时针这边要注意是24小时制的
            ctx.rotate(-(Math.PI / 2) + Math.PI / 6 * hour)
            // 绘制时针
            ctx.beginPath();
            ctx.lineWidth = 6
            ctx.strokeStyle = '#000';
            ctx.moveTo(-10, 0)
            ctx.lineTo(70, 0)
            ctx.stroke()
            ctx.closePath();
            ctx.restore();

            // 绘制分针
            ctx.save();
            ctx.rotate(-(Math.PI / 2) + Math.PI / 30 * minute)
            ctx.beginPath();
            ctx.lineWidth = 5
            ctx.strokeStyle = '#000';
            ctx.moveTo(-15, 0)
            ctx.lineTo(80, 0)
            ctx.stroke()
            ctx.closePath();
            ctx.restore();

            // 绘制秒针
            ctx.save();
            ctx.rotate(-(Math.PI / 2) + Math.PI / 30 * seconds)
            ctx.beginPath();
            ctx.lineWidth = 3
            ctx.strokeStyle = 'red';
            ctx.moveTo(-15, 0)
            ctx.lineTo(70, 0)
            ctx.stroke()
            ctx.closePath();
            ctx.restore();


            ctx.save();
            ctx.rotate(-(Math.PI / 2) + Math.PI / 30 * seconds)
            ctx.beginPath();
            ctx.strokeStyle = 'red';
            ctx.arc(75, 0, 5, 0, Math.PI * 2)
            ctx.stroke()
            ctx.closePath();
            ctx.restore();

            ctx.beginPath();
            let dot = 7
            ctx.fillStyle = 'red';
            ctx.arc(0, 0, dot, 0, Math.PI * 2);
            ctx.fill()
            ctx.closePath();

            ctx.restore();

            ctx.restore();

            requestAnimationFrame(draw.bind(this, ctx));

        }

    </script>
</body>

</html>